<template>
    <div >
        <div class="box">
          <div class="inside">
            <ul>
              <li><h4>2,190</h4>
                <span><i class="icon-dot"></i>设备总数</span>
              </li>
              <li><h4>190</h4>
                <span><i class="icon-dot" style="color: #6acca3"></i>季度新增</span>
              </li>
              <li><h4>3,001</h4>
                <span><i class="icon-dot" style="color: #6acca3"></i>设备总数</span>
              </li>
              <li><h4>108</h4>
                <span><i class="icon-dot" style="color: #ed3f35"></i>异常设备</span>
              </li>
            </ul>
          </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'EchratTop',

  data () {
    return {

    }
  },

  mounted () {

  },

  methods: {

  }
}
</script>

<style lang="less" scoped>
.box {
  height: 20px;
}
.inside {
  ul {
    display: flex;
    justify-content: space-between;
  }
  li {
    font-size: 28px;
    color: #fff;
    h4 {
      font-size: 28px;
      margin: 0 0 10px 5px;
    }
    i {
      margin-right: 5px;
    }
    span {
      color: #4c9bfd;
      font-size: 16px;
    }
  }
}

</style>
